<template>
  <div class="div">
    <div
      class="item"
      v-for="item in list"
      :key="item.id"
      @click="getID(item.id)"
    >
      <div class="top">
        <!-- 头像 -->
        <img :src="item.creatorAvatar" />
        <div class="name">
          <div class="subname">{{ item.stem }}</div>
          <div class="name">{{ item.creatorName }} | {{ item.createdAt }}</div>
        </div>
      </div>
      <div class="middle">
        <div class="title">{{ item.content }}</div>
        <div class="like">
          点赞 {{ item.likeCount }} | 收藏 {{ item.views }}
          {{ item.viewCount }}
        </div>
      </div>
    </div>
  </div>
  <!-- <infinite-loading
    @infinite="loadingMore"
    :identifier="100"
  ></infinite-loading> -->
</template>

<script>
import axios from "axios";

export default {
  name: "HmArticle",
  data() {
    return {
      list: [],
      page: 1,
      loading: false,
      pageTotal: 0,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //获取文章列表
    async getList() {
      this.loading = true;
      const res = await axios({
        url: "https://mock.boxuegu.com/mock/3083/articles",
      });
      this.list = res.data.result.rows;
      this.pageTotal = res.data.result.pageTotal;
      console.log(res.data);
      console.log(this.pageTotal);
      this.loading = false;
    },
    //获取文章列表
    // async getList() {
    //   this.loading = true;
    //   const res = await axios({
    //     url: "https://mock.boxuegu.com/mock/3083/articles",
    //   });
    //   this.list = res.data.result.rows;
    //   this.pageTotal = res.data.result.pageTotal;
    //   console.log(res.data);
    //   console.log(this.pageTotal);
    //   this.loading = false;
    // },
    //发送文章id
    getID(id) {
      this.$router.push({
        path: `/detail?id=${id}`,
      });
    },
    //加载更多
    async loadingMore() {
      // 如果正在加载，则不执行
      if (this.loading) return;
      if (this.page > this.pageTotal) return;

      console.log("8888");
      this.loading = true;
      this.page++;
      const res = await axios({
        url: `https://mock.boxuegu.com/mock/3083/articles?count=${this.page}`,
      });
      let data = res.data.result.rows;
      this.list.push(...data);
      this.loading = false;
      console.log(this.list.length);
    },
  },
};
</script>

<style scoped lang="less">
.item {
  font-size: 14px;
  border-bottom: 1px solid #ccc;
  padding: 10px;
  margin: 0 10px;

  .top {
    display: flex;
    height: 40px;
    margin-bottom: 5px;

    .name {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      line-height: 20px;
    }

    img {
      width: 40px;
      height: 40px;
    }
  }

  .middle {
    font-size: 13px;

    //超出两行省略号
    .title {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
}
</style>
